<template>
    <div class="SingerDetails" id="SingerDetails">
        <!-- 导航栏 -->
        <div class="navBar">
            <div class="return" @click="back">
                <van-icon name="arrow-left" />
            </div>
            <div class="more" @click="goSinger">
                <img src="../assets/T1-solid-更多.png" alt="" />
            </div>
        </div>

        <!-- 封面 -->
        <div class="cover_box">
            <!-- 大图 -->
            <div
                class="cover"
                :style="{ backgroundImage: 'url(' + songerData.picUrl + ')' }"
            ></div>

            <!-- 底盒 -->
            <div class="bottom">
                <!-- 毛玻璃 -->
                <div class="groundGlass"></div>

                <!-- 文本盒 -->
                <div class="p_box">
                    <!-- 歌手 -->
                    <div class="songerName">{{ songerData.name }}</div>
                    <!-- 别名 -->
                    <div class="singerAlias">{{ songerData.alias }}</div>
                </div>

                <!-- 关注按钮 -->
                <div class="follow">
                    <van-button
                        color="linear-gradient(to right, #2825c3, #db2ef8)"
                        round
                        @click="collectionSonger_Fn"
                    >
                        {{ collectionSonger ? 'UN FOLLOW' : 'FOLLOW' }}
                    </van-button>
                </div>
            </div>
        </div>

        <!-- 歌手介绍 -->
        <div class="desc_box">
            <HomeTitle
                left_text="歌手介绍"
                :right_name="DescData.show ? 'arrow-up' : 'arrow-down'"
                @clickFn="descIntroductionShow"
            />

            <!-- 介绍区 -->
            <div class="desc">
                <!-- 简介 -->
                <div
                    class="briefDesc"
                    v-for="(item1, index1) in DescData.briefDesc"
                    :key="index1"
                >
                    {{ item1 }}
                </div>

                <!-- 介绍 -->
                <div
                    class="introduction"
                    v-for="(item2, index2) in DescData.introduction"
                    :key="index2 + 10"
                    v-show="DescData.show"
                >
                    <!-- 标题 -->
                    <div class="ti">{{ item2.ti }}</div>
                    <!-- 文本 -->
                    <div class="txt" v-for="(v, i) in item2.txt" :key="i">
                        {{ v }}
                    </div>
                </div>
            </div>
        </div>

        <!-- 热门专辑 -->
        <div class="album_box">
            <HomeTitle left_text="热门专辑" />

            <!-- 专辑区 -->
            <div class="album">
                <!-- 专辑元素 -->
                <div
                    class="albumItem"
                    v-for="(item, index) in albumData"
                    :key="index"
                >
                    <!-- 封面 -->
                    <div
                        class="picUrl"
                        :style="{ backgroundImage: 'url(' + item.picUrl + ')' }"
                    >
                        <div></div>
                    </div>
                    <!-- 专辑名 -->
                    <div class="name">{{ item.name }}</div>
                    <!-- 专辑发布日期 -->
                    <div class="publishTime">
                        {{ item.publishTime | publishTime_text }}
                    </div>
                </div>
            </div>
        </div>

        <!-- 热门50首单曲 -->
        <div class="hotSongs_box">
            <HomeTitle left_text="热门单曲" :right_show="false" />

            <!-- 单曲区 -->
            <div class="hotSongs">
                <!-- 单曲元素 -->
                <Single
                    v-for="(item, index) in AllSongsData.songsData"
                    :key="index"
                    :item="item"
                    :index="index"
                />
            </div>

            <!-- 加载更多 -->
            <div
                class="more"
                v-if="AllSongsData.songsData_reserve.length !== 0"
            >
                <van-button
                    color="linear-gradient(to right, #2825c3, #db2ef8)"
                    round
                    @click="loadMore"
                >
                    LOAD MORE
                </van-button>
            </div>
        </div>

        <!-- 相似艺人 -->
        <div class="simiArtist_box">
            <HomeTitle left_text="相似艺人" :right_show="false" />

            <!-- 艺人区 -->
            <div class="SingerList">
                <SingerListItem
                    v-for="(v, i) in AllSimiArtistData.simiArtistData"
                    :key="i"
                    :v="v"
                    @go="goSingerDetails(v.id)"
                />
            </div>

            <!-- 加载更多 -->
            <div
                class="moreSinger"
                v-if="AllSimiArtistData.simiArtistData_reserve.length !== 0"
            >
                <van-button
                    color="linear-gradient(to right, #2825c3, #db2ef8)"
                    round
                    @click="moreSinger"
                >
                    More Singer
                </van-button>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions, createNamespacedHelpers } from 'vuex';
const {
    mapState: controlAudioMapState,
    mapMutations: controlAudioMapMutations,
    mapGetters: controlAudioMapGetters,
    mapActions: controlAudioMapActions
} = createNamespacedHelpers('controlAudio');
const {
    mapState: AccountMapState,
    mapMutations: AccountMapMutations,
    mapGetters: AccountMapGetters,
    mapActions: AccountMapActions
} = createNamespacedHelpers('Account');
import SingerListItem from '../components/SingerListItem.vue'
import HomeTitle from '../components/HomeTitle.vue'
import Single from '../components/Single.vue'
import { Toast } from 'vant';
import { Dialog } from 'vant';
export default {
    name: "SingerDetails",
    components: { SingerListItem, HomeTitle, Single },

    filters: {
        // 发布日期 文本
        publishTime_text: (value) => {
            // 获取 时间
            let time = new Date(value);

            let n = time.getFullYear();//年
            let y = time.getMonth() + 1; //月
            let r = time.getDate();//日

            // 补零
            y = y < 10 ? "0" + y : y;
            r = r < 10 ? "0" + r : r;

            // 输出
            return `${n}-${y}-${r}`;
        }
    },
    computed: {
        // 音频的播放状态
        ...controlAudioMapState(['id']),

        ...AccountMapState(['uid']),


        // 歌手 收藏状态 f未收藏，t已收藏
        collectionSonger() {
            let obj = this.songerIds.find((v, i) => {

                if (v.userId == this.songerData.userId) {
                    return true
                } else { return false; }
            });
            console.log('collectionSonger ==> 收藏歌手 obj ', obj);

            if (obj) {
                return true
            } else { return false }
        }
    },
    data() {
        return {
            // 会话数据 收藏歌手列表
            songerIds: [],


            // 基本数据
            songerData: {
                // 名字
                name: '',
                // 封面
                picUrl: "",
                // 别名
                alias: '',
                // 歌手id
                userId: null,
            },

            // 介绍数据
            DescData: {
                briefDesc: '',
                introduction: [
                    // {
                    //     ti: '',
                    //     txt: []
                    // }
                ],
                show: false
            },

            // 热门15张专辑
            albumData: [
                // {
                //     name: "",
                //     id: "",
                //     picUrl: "",
                //     publishTime:""
                // }
            ],

            // 热门50首首歌
            AllSongsData: {
                songsData: [
                    // {
                    //     name: "",
                    //     albumName:"",    
                    //     id: "",
                    //     mv: "",
                    // }
                ],
                songsData_reserve: []
            },

            // 20个相似歌手
            AllSimiArtistData: {
                simiArtistData: [
                    // {
                    //     id: null,//歌手id
                    //     name: "",//歌手名字
                    //     picUrl: "",//封面路径
                    //     alias: "",//别名                      
                    //     fansCount: null,//粉丝数量
                    //     musicSize: null,//歌曲数量
                    //     albumSize: null,//人气专辑数量
                    // }
                ],
                simiArtistData_reserve: []
            },
        }
    },
    methods: {
        ...mapMutations(['VIP_TB_Fn']),
        // 返回上一级
        back() {
            this.$router.back();
        },

        // 切换介绍显示
        descIntroductionShow() {
            if (this.DescData.introduction.length === 0) {
                Toast.fail({
                    message: '该艺人没有更多的介绍数据',
                    forbidClick: true,
                });
                return
            }
            this.DescData.show = !this.DescData.show
        },

        // 跳转到 新的歌手详情
        goSingerDetails(id) {
            this.$router.push({ name: 'SingerDetails', params: { id } });
        },

        // 返回Singer
        goSinger() {
            Dialog.confirm({
                title: '歌手浏览历史过多？',
                message: '一键返回Singer',
            })
                .then(() => {
                    this.$router.push({ name: 'Singer' });
                })
                .catch(() => { });

        },
        ...controlAudioMapMutations(['playSuspend_Switch', 'changeAudioUrl', 'changeStateProperty']),



        // 加载更多
        loadMore() {
            this.AllSongsData.songsData.push(...this.AllSongsData.songsData_reserve.splice(0, 10))
        },

        // 更多艺人
        moreSinger() {
            this.AllSimiArtistData.simiArtistData.push(...this.AllSimiArtistData.simiArtistData_reserve.splice(0, 5))
        },

        // 关注歌手
        collectionSonger_Fn() {
            if (!this.uid) { this.$router.push({ name: 'LogOn' }); }
            if (this.collectionSonger) {
                Dialog.confirm({
                    title: '确定取消关注该歌手？',
                })
                    .then(() => {
                        // 删除创建者id
                        this.songerIds = this.songerIds.filter((v, i) => {
                            if (this.songerData.userId == v.userId) {
                                return false
                            } else {
                                return true;
                            }
                        });

                        sessionStorage.setItem(
                            "songerIds",
                            JSON.stringify(this.songerIds)
                        );
                        Toast.success({
                            message: '取消关注\n成功！',
                            forbidClick: true,
                        });
                    })
                    .catch(() => { });
            }
            else {
                this.songerIds.push({
                    userId: this.songerData.userId,
                });

                sessionStorage.setItem(
                    "songerIds",
                    JSON.stringify(this.songerIds)
                );
                Toast.success({
                    message: '关注成功！',
                    forbidClick: true,
                });
            };
        },


        //请求 歌手介绍
        getDescData(id) {
            this.songerData.userId = id;

            // 获取会话中的 收藏歌手列表
            this.songerIds = sessionStorage.getItem("songerIds");
            if (this.songerIds) {
                this.songerIds = JSON.parse(this.songerIds);
            } else {
                this.songerIds = [];
            }


            this.axios({
                methods: "GET",
                url: "/artist/desc",
                params: { id }
            }).then((result) => {
                // console.log("🚀 ==> getData ==> result", result);
                if (result.data.code === 200) {
                    this.DescData.briefDesc = result.data.briefDesc.split('\n');

                    this.DescData.introduction = [];
                    result.data.introduction.forEach((v) => {
                        let txt = v.txt.split('\n');
                        this.DescData.introduction.push({
                            ti: v.ti,
                            txt
                        })
                    })
                    // console.log("🚀 ==> getDescData ==> this.DescData", this.DescData);

                    //请求 歌手热门专辑
                    this.getHotAlbum(id);
                }
            }).catch((err) => {
                console.log("🚀 ==> getData ==> err", err);
            });
        },
        //请求 歌手热门专辑
        getHotAlbum(id) {
            this.axios({
                methods: "GET",
                url: "/artist/album",
                params: { id }
            }).then((result) => {
                // console.log("🚀 ==> getHotAlbum ==> result", result);
                if (result.data.code === 200) {

                    this.albumData = [];
                    result.data.hotAlbums.forEach((v) => {
                        if (this.albumData.length < 15) {
                            this.albumData.push({
                                name: v.name,
                                id: v.id,
                                picUrl: v.picUrl + '?param=140y140',
                                publishTime: v.publishTime
                            });
                        };
                    });
                    console.log("🚀 ==> getHotAlbum ==>  this.albumData", this.albumData);


                    // 基本信息赋值                   
                    let alias = "";// 别名合体
                    if (result.data.artist.alias.length > 0) {
                        result.data.artist.alias.forEach((v) => { alias += v + ' / ' })
                    }
                    if (result.data.artist.trans) { alias += result.data.artist.trans + ' / '; }
                    // 清除末尾 " / "
                    if (alias) { alias = alias.slice(0, -3); }

                    this.songerData.name = result.data.artist.name;
                    this.songerData.picUrl = result.data.artist.picUrl;
                    this.songerData.alias = alias;
                    // console.log("🚀 ==> getHotAlbum ==>  this.songerData", this.songerData);



                    //请求 歌手热门50首歌
                    this.getHot50Song(id);
                }
            }).catch((err) => {
                console.log("🚀 ==> getHotAlbum ==> err", err);
            });
        },
        //请求 歌手热门50首歌
        getHot50Song(id) {
            this.axios({
                methods: "GET",
                url: "/artist/top/song",
                params: { id }
            }).then((result) => {
                // console.log("🚀 ==> getHot50Song ==> result", result);
                if (result.data.code === 200) {
                    this.AllSongsData.songsData = [];
                    this.AllSongsData.songsData_reserve = [];
                    result.data.songs.forEach((v) => {
                        if (this.AllSongsData.songsData.length < 10) {
                            this.AllSongsData.songsData.push({
                                name: v.name,
                                albumName: v.al.name,
                                id: v.id,
                                mv: v.mv,
                            })
                        } else {
                            this.AllSongsData.songsData_reserve.push({
                                name: v.name,
                                albumName: v.al.name,
                                id: v.id,
                                mv: v.mv,
                            })
                        }
                    });
                    // console.log("🚀 ==> getHot50Song ==>  this.AllSongsData", this.AllSongsData);
                    // 请求 相似艺人
                    this.getSimiArtist(id);
                }
            }).catch((err) => {
                console.log("🚀 ==> getHot50Song ==> err", err);
            });
        },
        //请求 相似艺人
        getSimiArtist(id) {
            this.axios({
                methods: "GET",
                url: "/simi/artist",
                params: { id }
            }).then((result) => {
                // console.log("🚀 ==> getSimiArtist ==> result", result);
                if (result.data.code === 200) {
                    this.AllSimiArtistData.simiArtistData = [];
                    this.AllSimiArtistData.simiArtistData_reserve = [];
                    result.data.artists.forEach((v) => {
                        // 别名合体
                        let alias = "";
                        if (v.alias.length > 0) { v.alias.forEach((v) => { alias += v + ' / ' }) }
                        if (v.trans) { alias += v.trans + ' / '; }
                        // 清除末尾 " / "
                        if (alias) { alias = alias.slice(0, -3); }


                        if (this.AllSimiArtistData.simiArtistData.length < 5) {
                            this.AllSimiArtistData.simiArtistData.push({
                                id: v.id,//歌手id
                                name: v.name,//歌手名字
                                picUrl: v.picUrl + '?param=140y140',//封面路径
                                alias,//别名                      
                                fansCount: v.fansCount,//粉丝数量
                                musicSize: v.musicSize,//歌曲数量
                                albumSize: v.albumSize,//人气专辑数量
                            });
                        } else {
                            this.AllSimiArtistData.simiArtistData_reserve.push({
                                id: v.id,//歌手id
                                name: v.name,//歌手名字
                                picUrl: v.picUrl + '?param=140y140',//封面路径
                                alias,//别名
                                fansCount: v.fansCount,//粉丝数量
                                musicSize: v.musicSize,//歌曲数量
                                albumSize: v.albumSize,//人气专辑数量
                            });
                        }
                    });
                    // console.log("🚀 ==> getSimiArtist ==>  this.AllSimiArtistData", this.AllSimiArtistData);


                    // 回滚到顶部
                    let dom = document.getElementById('SingerDetails');
                    let num = dom.scrollTop / 40;
                    // 无限定时器
                    let go = setInterval(() => {
                        dom.scrollTop -= num;

                        // 到顶了,就销毁
                        if (dom.scrollTop <= 0) {
                            dom.scrollTop = 0;
                            clearInterval(go);
                        }
                    }, 10);

                }
            }).catch((err) => {
                console.log("🚀 ==> getSimiArtist ==> err", err);
            });
        }
    },
    // 初始化
    created() {
        this.VIP_TB_Fn(true);

        console.log("歌手id ===> ", this.$route.params.id);
        this.getDescData(this.$route.params.id);
    },

    beforeRouteUpdate(to, from, next) {
        next();
        this.getDescData(this.$route.params.id);
    },
}
</script>

<style lang="less" scoped>
.SingerDetails {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #131126;
    overflow: scroll;

    // 导航栏
    .navBar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        top: 20px;
        right: 0;
        left: 0;
        padding: 15px;

        // 返回
        .return {
            font-size: 26px;
            color: #9893cd;
        }

        // 更多
        .more {
            width: 36px;
        }
    }

    // 封面盒
    .cover_box {
        overflow: hidden;
        height: 320px;
        display: flex;
        flex-flow: column-reverse;
        background-image: url('../assets/singer.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        position: relative;
        z-index: -2;
        margin-bottom: 33px;

        // 封面
        .cover {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            // background-attachment:fixed;

            &::before {
                content: '';
                position: absolute;
                height: 87px;
                bottom: -18px;
                left: 0;
                right: 0;
                background: inherit;
                background-position: bottom center;
                filter: blur(13px);
            }
        }

        // 底部信息
        .bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            z-index: 1;
            position: relative;

            // 毛玻璃效果
            .groundGlass {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 67px;
                background-color: rgba(0, 0, 0, 0.25);
                z-index: -1;
            }

            //    歌手名字 + 别名
            .p_box {
                .songerName {
                    color: #fff;
                    font-weight: 600;
                    font-size: 20px;
                    margin-bottom: 5px;
                }
                .singerAlias {
                    color: rgba(255, 255, 255, 0.8);
                }
            }

            // 关注按钮
            button {
                height: 32px;
                padding: 0 18px;
                font-size: 13px;
            }
        }
    }

    // 介绍盒
    .desc_box {
        margin: 0 5px;
        letter-spacing: 1px;

        // 介绍区
        .desc {
            max-height: 500px;
            overflow: scroll;
            padding: 0 15px;
            margin-bottom: 40px;
            color: #ebeced;
            line-height: 14px;

            // 简介
            .briefDesc {
                margin-bottom: 10px;
                line-height: 15px;
            }

            // 介绍
            .introduction {
                padding-top: 10px;
                margin-bottom: 10px;
                display: flex;
                flex-flow: column;
                align-items: flex-start;

                &:nth-last-child(1) {
                    margin-bottom: 0;
                }

                // 标题
                .ti {
                    background-image: linear-gradient(90deg, #43db8a, #2b97fc);
                    background-clip: text;
                    -webkit-background-clip: text;
                    color: transparent;
                    font-size: 16px;
                    line-height: 16px;
                    font-weight: 600;
                    letter-spacing: 2px;
                    margin-bottom: 10px;
                }

                // 文本
                .txt {
                    color: #d4d5d6;
                    margin-bottom: 10px;

                    &:nth-last-child(1) {
                        margin-bottom: 0;
                    }
                }
            }
        }
    }

    // 热门专辑
    .album_box {
        margin: 0 5px 40px;
        // 专辑区
        .album {
            display: flex;
            overflow: scroll;
            padding: 0 15px;

            //  专辑元素
            .albumItem {
                padding-bottom: 5px;
                margin-right: 25px;
                &:nth-last-child(1) {
                    margin-right: 0;
                }

                // 封面
                .picUrl {
                    width: 100px;
                    height: 100px;
                    margin-bottom: 13px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    border-radius: 50%;
                    background-size: contain;
                    background-repeat: no-repeat;
                    background-position: center center;

                    &::after {
                        content: '';
                        position: absolute;
                        bottom: -5px;
                        width: 100px;
                        height: 100px;
                        border-radius: 50%;
                        background: inherit;
                        filter: blur(5px);
                        z-index: -1;
                    }

                    // 空心圆
                    div {
                        border-radius: 50%;
                        width: 25px;
                        height: 25px;
                        background: #000;
                    }
                }

                // 专辑名
                .name {
                    max-width: 100px;
                    font-size: 14px;
                    color: #fff;
                    margin-bottom: 8px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    word-break: break-all;
                }
                //  专辑发布日期
                .publishTime {
                    color: #afafaf;
                    margin-left: 15px;
                }
            }
        }
    }

    //热门50首单曲
    .hotSongs_box {
        margin-bottom: 50px;
        .title_box {
            padding: 0 20px;
        }

        // 单曲区
        // .hotSongs {
        // }

        // 加载更多
        .more {
            margin-top: 20px;
            display: flex;
            button {
                margin: 0 auto;
                height: 36px;
            }
        }
    }

    // 相似艺人
    .simiArtist_box {
        margin: 0 5px;
        padding-bottom: 80px;

        // 艺人区
        .SingerList {
            padding: 0 15px;
        }

        // 加载更多
        .moreSinger {
            margin-top: 20px;
            display: flex;
            button {
                margin: 0 auto;
                height: 34px;
            }
        }
    }
}
</style>